<template>
  <div class="router-list">
    <ul>
      <li v-for="(tag,index) in self.tagList" :key="index" @click="toPath(tag)">
        <span :style="tag.check?{'color':tag.meta.color,fontSize: '20px'}:''">
          <component :size="20" style="margin-right: 4px" :is="tag.meta.icon"/>
          <span>{{ tag.meta.title }}</span>
        </span>
        <span class="nav-line" v-if="tag.check" :style="tag.check?{'backgroundColor':tag.color}:''"></span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref ,reactive, onMounted,watch,toRaw  } from "vue";
import {useRouter} from "vue-router";
import {dynamicRoutes} from '@/router/route'

let router = useRouter()
//监听路由变化
watch(() =>router.currentRoute.value.path,(newValue,oldValue)=> {
  if (newValue){
    changeTag()
  }
})

// 获取路由列表
const getRouter = () => {
  self.tagList = dynamicRoutes[0].children.filter(item=>item.meta)
}
const self = reactive({
  tagList:[]
})

const changeTag = () => {
  let path = router.currentRoute.value.path;
  self.tagList.forEach(item => {
    if (path.includes(item.path) ) {
      item.check = true
    } else {
      item.check = false
    }
  })

}
const toPath = (item)=>{
  console.log('Z',item)
  router.push({name:item.name})
}
onMounted(()=>{
  getRouter()
  changeTag()
})

</script>

<style scoped>
.router-list {
  /*width: 350px;*/
  height: 100%;
  /*border: 1px red solid;*/
  --color-primary: #2296ee;
}

.router-list li {
  list-style: none;
  color: #5c5c5c;
  padding: 0 13px;
  letter-spacing: 1px;
  position: relative;
  display: list-item;
  text-align: -webkit-match-parent;
}

.router-list li:hover {
  color: #1a1a1a;
}

.router-list ul {
  display: flex;
}

.nav-line {
  display: block;
  position: absolute;
  height: 3px;
  border-radius: 5px;
  bottom: 0;
  left: 30px;
  width: 35px;
  -webkit-animation: fadeInLeft 2s;
  animation: fadeInLeft 1s;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
</style>